<template>
	<view class="password">
		<view class="login-title">
			<image
				class="logo"
				src="/static/logo.png"
				mode="aspectFit"
			></image>
			<view class="login-content-title">登录聚芯食堂</view>
		</view>

		<uni-forms
			class="login-form"
			ref="customForm"
			label-width="0px"
			:rules="fromRules"
			:modelValue="formData"
		>
			<uni-forms-item
				label=""
				name="password"
			>
				<view class="login-form-input">
					<text class="login-form-input-label">原密码</text>
					<input
						v-model="formData.password"
						trim="both"
						type="text"
						confirm-type="next"
						prefixIcon="person-filled"
						placeholder="请输入密码"
						@confirm="handleConfirm"
					/>
				</view>
			</uni-forms-item>
			<uni-forms-item
				label=""
				name="newPWD"
			>
				<view class="login-form-input">
					<text class="login-form-input-label">新密码</text>
					<input
						v-model="formData.newPWD"
						:focus="isFocus"
						type="text"
						trim="both"
						password-icon
						confirm-type="done"
						placeholder="请输入新密码"
						prefixIcon="locked-filled"
					/>
				</view>
			</uni-forms-item>

			<uni-forms-item
				label=""
				name="repeat"
			>
				<view class="login-form-input">
					<text class="login-form-input-label">新密码</text>
					<input
						v-model="formData.repeat"
						:focus="isFocus"
						type="text"
						trim="both"
						password-icon
						placeholder="请再次输入新密码"
						confirm-type="done"
						prefixIcon="locked-filled"
					/>
				</view>
			</uni-forms-item>
		</uni-forms>

		<view class="btns">
			<button
				type="primary"
				plain
				style="flex: 1"
				@click="onCancel"
			>
				取消
			</button>

			<button
				type="primary"
				style="flex: 1"
				@click="submit"
			>
				修改
			</button>
		</view>
	</view>
</template>

<script>
import { useUserStore } from '@/stores/user.js';
import { changePassword } from '@/apis/users.js';

export default {
	data() {
		return {
			isFocus: false,
			// 自定义表单数据
			formData: {
				password: '',
				newPWD: '',
				repeat: '',
			},
			// 自定义表单校验规则
			fromRules: {
				password: {
					rules: [
						{
							required: true,
							errorMessage: '请输入密码',
						},
					],
				},
				newPWD: {
					rules: [
						{
							required: true,
							errorMessage: '请输入新密码',
						},
					],
				},
				repeat: {
					rules: [
						{
							required: true,
							errorMessage: '请再次输入密码',
						},
						{
							validateFunction: (rule, value, data, callback) => {
								console.log('newPWD', this.formData.newPWD.trim());
								if (this.formData.newPWD.trim() !== value.trim()) {
									callback('和新密码不一致');
								}
								return true;
							},
						},
					],
				},
			},
		};
	},
	onReady() {
		// 设置自定义表单校验规则，必须在节点渲染完毕后执行
		this.$refs.customForm.setRules(this.fromRules);
	},
	methods: {
		changePassword() {
			const that = this;

			const phone = useUserStore().phone;
			const oldPassword = this.formData.password.trim();
			const newPassword = this.formData.newPWD.trim();

			// console.log('phone', phone);
			// console.log('oldPassword', oldPassword);
			// console.log('newPassword', newPassword);
			// console.log('111111111111');

			uni.showLoading();

			changePassword({
				phone,
				oldPassword,
				newPassword,
			})
				.then((res) => {
					console.log('change password', res);
					if (res.code !== 200) {
						uni.showToast({
							icon: 'fail',
							title: '原密码错误',
						});
						return;
					}

					// uni.hideLoading();
					uni.showToast({
						title: '修改成功',
						icon: 'success',
					});
					uni.redirectTo({
						url: '../../pages/index/index',
					});
				})
				.finally(() => {
					uni.hideLoading();
				});
		},

		async submit() {
			const that = this;
			this.$refs.customForm
				.validate()
				.then((res) => {
					// 表单验证成功
					// console.log(res);
					that.changePassword();
				})
				.catch((err) => {
					console.log('err', err);
				});

			// const result = await this.$refs.customForm.validate();
			// console.log('result', result);
		},
		// 返回首页
		onCancel() {
			uni.navigateBack();
		},
		handleConfirm() {
			this.isFocus = false;
			this.$nextTick(() => {
				this.isFocus = true;
			});
		},
	},
};
</script>

<style scoped>
.password {
	padding: 36rpx;
}

.login-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	margin-top: 32rpx;
	/* margin-top: -300rpx; */
}

.logo {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 32rpx;
	/* margin: 0 auto; */
}
.login-content-title {
	/* margin-top: 60rpx; */
	margin-bottom: 50rpx;
	font-size: 28px;
}

.login-form {
	margin: 0 auto;
	/* background-color: pink; */
}

.login-form-input {
	display: flex;
	align-items: center;
	background-color: #f2f3f7;
	height: 90rpx;
	border-radius: 20rpx;
}

.login-form-input-label {
	width: 90rpx;
	margin: 0 28rpx;
}

.btns {
	display: flex;
	justify-content: space-between;
	gap: 56rpx;
	margin-top: 48rpx;
}
</style>
